<template>
  <div >
    <canvas width="400" height="400" id="c" style="border: 1px solid #ccc;"></canvas>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { fabric } from 'fabric' // 引入 fabric

const init = ()=> {
  const canvas = new fabric.Canvas('c',{
    width: 1000, // 画布宽度
    height: 800, // 画布高度
    backgroundColor: '#eee' // 画布背景色
  }) // 这里传入的是canvas的id

  canvas.setBackgroundImage(
    'http://192.168.70.36:8080/toolbox/image/src/views/PC/cutOut/imgs/image-cutout-bg3.jpg',
    canvas.renderAll.bind(canvas),
    {
      angle:12
    }
  )

  // 创建一个长方形
  const rect = new fabric.Rect({
    top: 30, // 距离容器顶部 30px
    left: 30, // 距离容器左侧 30px
    width: 100, // 宽 100px
    height: 60, // 高 60px
    fill: 'red' // 填充 红色
  })

  // 在canvas画布中加入矩形（rect）。add是“添加”的意思
  canvas.add(rect)
}

onMounted(() => {
  init() // 执行初始化函数
})

</script>
<style scoped lang='scss'>
</style>